<template>
    <div class=" gallery-section">
        <div class="inner-width">
            <h1>图片展示</h1>
            <div class="border"></div>
            <div class="container">
                <div v-for="(item, index) in srcList" :key="item.id" class="image">
                    <el-image :z-index="1938" :src="item.url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="previewSrcList" :initial-index="index" fit="cover" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { allGalleryListAPI } from '@/api'
import { ref } from 'vue';
let srcList = ref([])
const previewSrcList = ref([]);
const initgallery = async () => {
    const res = await allGalleryListAPI()
    srcList.value = res
    previewSrcList.value = srcList.value.map(item => item.url);
}
initgallery()
</script>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:deep(.el-image-viewer__img) {
    max-width: 60% !important;
    /* 设置预览图片的最大宽度 */
    max-height: 60% !important;
    /* 设置预览图片的最大高度 */
}

.gallery-section {
    margin-top: 8rem;
    width: 100%;
    padding: 20px 0;
}

.gallery-section h1 {
    text-align: center;
    font-size: 3rem;
    color: #333;
}

.border {
    width: 180px;
    height: 4px;
    background: #333;
    margin: 20px auto;
}

.container {
    width: 1400px;
    margin: 20px auto;
    columns: 4;
    margin-top: 40px;
    column-gap: 20px;
}

.container .image {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 15px;
    break-inside: avoid;
    overflow: hidden;
    cursor: pointer;
}

.container .image .el-image {
    max-width: 100%;
    border-radius: 15px;
    transform: 0.4s;
}

@media (max-width:1200px) {
    .container {
        width: calc(100% - 40px);
        columns: 3;
    }
}

@media (max-width:768px) {
    .container {
        columns: 2;
    }
}
</style>